<template>
	<view class="home">
		<image style="width: 100%;" src="/static/home/img_shouy.png" mode="widthFix"></image>
		<!-- 搜索 -->
		<view class="home_search">
			<view class="home_are">
				<uni-data-picker v-slot:default="{data, error, options}" :localdata="localData" @change="onPickerChange"
					v-model="value">
					<view v-if="error" class="error">
						<text>{{error}}</text>
					</view>
					<view v-else-if="data.length" class="selected">
						<text>{{data[data.length-1].text}}</text>
					</view>
					<view v-else>
						<text>请选择</text>
					</view>
				</uni-data-picker>
				<image style="width: 28rpx;" src="/static/icon_xiala.png" mode="widthFix">
				</image>
			</view>
			<view class="home_search_ss">
				<image style="width: 32rpx;margin-right: 14rpx;" src="../../static/icon_search.png" mode="widthFix">
				</image>
				<input type="text" v-model="text" placeholder="搜索房源" @confirm="onSearch">
				<!-- 搜索门店/服务 -->
			</view>
		</view>
		<!-- type list -->
		<view class="type_list">
			<view class="type_item" v-for="item,index in tablist" @click="handleTab(index)">
				<image class="type_item_img" :src="item.img" mode="widthFix"></image>
				<view class="type_item_title">{{item.name}}</view>
			</view>
		</view>
		<!-- line -->
		<view class="" style="width: 100%;height: 20rpx;background: #F2F4F5;"></view>
		<!-- tab -->
		<view class="tab_lists">
			<view v-for="(item, index) in tabList" :key="index" @click="handleTabCurrent(index)"
				:class="tabCurrent === index ? 'tab-item active' : 'tab-item'">
				{{ item.name }}
			</view>
		</view>
		<!-- list -->
		<list :list="list"></list>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	import list from './list.vue'
	export default {
		components: {
			list
		},
		data() {
			return {
				current: 1, // 初始值，可以根据需要动态改变
				tabCurrent: 0,
				tabList: [{
					name: '推荐'
				}, {
					name: '整租'
				}, {
					name: '合租'
				}],
				list: [],
				text:'',
				show: false,
				value: '', // 绑定值
				localData: [],
				tablist: [{
						name: '出租',
						img: '/static/icon.png'
					},
					{
						name: '整租',
						img: '/static/icon1.png'
					},
					{
						name: '租房课堂',
						img: '/static/icon2.png'
					},
					{
						name: '租房需求',
						img: '/static/icon3.png'
					},
					{
						name: '租房须知',
						img: '/static/icon4.png'
					},
					{
						name: '签约须知',
						img: '/static/icon5.png'
					},
				],
				page: 1,
				size: 20,
				info: {},
				city_id: "",
				current:0
			};
		},
		computed: {

		},
		async onShow() {
			try {
				const response = await request('/v1/user', 'GET', {}, 'info');
				if (response) {
					this.info = response.body
				}

			} catch (error) {
				console.error('请求失败:', error);
			}
			this.list = []
			this.text=''
			this.page=1
			this.current=0
			this.cityData()
			this.fetchData()

			// console.log(this.localData);
		},
		onReachBottom() {
			if (this.current > this.list.length) {
				this.page++
				this.fetchData()
			}
		},
		methods: {
			transformData(data) {
				return data.map(item => ({
					text: item.name, // 将 name 改为 text
					value: item.id, // 将 id 改为 value
					children: item.child ? this.transformData(item.child) : [] // 将 child 改为 children
				}));
			},
			async cityData() {
				try {
					const response = await request('/v1/city', 'GET', {}, 'tree');
					if (response) {
						this.localData = this.transformData(response.body);
					}

				} catch (error) {
					console.error('请求失败:', error);
				}

			},
			handleTab(index) {
				// 出租
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/my/settle'
					})
				} else if (index == 1) {
					//整租
					if (this.info.check != undefined) {
						// uni.showToast({
						// 	icon: "none",
						// 	title: "已实名认证"
						// })
						uni.navigateTo({
							url: '/pages/index/search?type=1'
						})
					} else {
						uni.navigateTo({
							url: '/pages/my/real'
						})
					}
				}else{
					uni.navigateTo({
						url: '/pages/index/notice?index='+index
					})
				}

			},
			handleTabCurrent(value) {
				this.tabCurrent = value
				this.page = 1
				this.list = []
				this.current=0
				this.fetchData()
			},
			// 地区
			async onPickerChange(selectedValue) {
				console.log(selectedValue,666);
				this.city_id = selectedValue.detail.value[selectedValue.detail.value.length - 1].value
				this.page = 1
				this.current=0
				this.list = []
				this.fetchData()
			},
			// handleClear(){
			// 	console.log(11);
			// },
			//搜索
			onSearch(e) {
				uni.navigateTo({
					url: '/pages/index/search?name=' + e.detail.value
				})
			},

			async fetchData() {
				try {
					let params={}
					params['page'] = this.page;
					params['size'] = this.size;
					if(this.tabCurrent!=0){
						params['type'] = this.tabCurrent;
					}
					if(this.city_id){
						params['city_id'] = this.city_id;
					}
					const response = await request('/v1/rent', 'GET',params,
						'list'); // 只需要传递相对路径
					this.list = this.list.concat(response.body.list.map(item => ({
					    ...item,
					    images: JSON.parse(item.images),
					    tags: JSON.parse(item.tags)
					})));
					this.current = response.body.pages.count
				} catch (error) {
					console.error('请求失败:', error);
				}
			},
		}
	};
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.home {
		width: 100%;
		margin: 0 auto;
		padding-bottom: 20rpx;
	}

	.home_search {
		display: flex;
		align-items: center;
		width: 95%;
		margin: 0 auto;
		/* width: 686rpx; */
		height: 80rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.14);
		border-radius: 40rpx;
		margin-top: -40rpx;
		position: relative;
		z-index: 99;
	}

	.home_are {
		display: flex;
		align-items: center;
		margin-left: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
	}

	.home_search_ss {
		display: flex;
		align-items: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #C3C3C3;
		margin-left: 36rpx;
		position: relative;
	}

	.home_search_ss>image {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 10rpx;
		z-index: 99;
	}

	.home_search_ss>input {
		margin-left: 40rpx;

	}

	/*  */
	.type_list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 28rpx;
	}

	.type_item {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 24rpx;
	}

	.type_item_img {
		width: 100rpx;
		margin-bottom: 12rpx;
	}

	/*  */
	.tab_lists {
		width: 100%;
		margin: 0 auto;
		padding-left: 36rpx;
		display: flex;
		padding-top: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #333;
		/* line-height: 22px; */
		text-align: left;
		font-style: normal;
		box-sizing: border-box;
	}

	.tab-item {
		display: flex;
		align-items: center;
		margin-right: 30px;
	}

	.active {
		position: relative;
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
	}

	.active::after {
		content: '';
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -10px;
		width: 20px;
		height: 7px;
		background: url('/static/icon_xz.png') no-repeat center;
		background-size: cover;
	}

	/*  */
	.input-value-border {
		border: none !important;
	}

	.input-arrow {
		width: 0 !important;
	}

	.arrow-area {
		width: 0 !important;
	}

	.uni-icons {
		font-size: 0 !important;
	}
</style>